<!-- <page-header-wrapper [title]="'ETC白名单'" [content]="content">
  <ng-template #content>
    <nz-tabset class="tabs-wrap">
      <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.name" (nzSelect)="changeTab(tab)"> </nz-tab>
    </nz-tabset>
  </ng-template>
</page-header-wrapper>

<nz-card class="search-box">
  <div nz-row nzGutter="8">
    <div nz-col [nzXl]="18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
      <sf
        #sf
        [schema]="searchSchema"
        [ui]="{ '*': { spanLabelFixed: 110, grid: { lg: 8, md: 12, sm: 12, xs: 24 } } }"
        [compact]="true"
        [button]="'none'"
      ></sf>
    </div>
    <div nz-col [nzXl]="6" [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXs]="24" class="text-right">
      <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="st?.load(1)" acl  [acl-ability]="[tabType === 1 ?'TICKET-ETC-BLACK_LIST-freightList' : 'TICKET-ETC-BLACK_LIST-cartList']">查询</button>
      <button nz-button (click)="resetSF()">重置</button>
      <button nz-button (click)="exprot()"  acl  [acl-ability]="[tabType === 1 ?'TICKET-ETC-BLACK_LIST-exportFreight' : 'TICKET-ETC-BLACK_LIST-exportCart']"> 导出</button>
    </div>
  </div>
</nz-card> -->

<nz-card class="table-box">
  <div class="tab_header">
    <label class="page_title"> <label class="driver">|</label> ETC白名单</label>
    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
      <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.name" (nzSelect)="changeTab(tab)"> </nz-tab>
    </nz-tabset>
  </div>
  <ng-template #extraTemplate>
    <div class="d-flex align-items-center mr-sm">
      <div class="mr-md">
        已选择
        <strong class="text-primary">{{ selectedRows.length }}</strong> 条数据
        <a *ngIf="selectedRows.length > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
      </div>
      <button nz-button nzDanger [nzLoading]="service.http.loading" (click)="openDrawer()">筛选</button>
      <button nz-button nzDanger (click)="exprot()" acl
        [acl-ability]="[tabType === 1 ?'TICKET-ETC-BLACK_LIST-exportFreight' : 'TICKET-ETC-BLACK_LIST-exportCart']">
        导出</button>
      <button nz-button nz-dropdown [nzDropdownMenu]="menu" nzPlacement="bottomLeft">
        更多<i nz-icon nzType="down" nzTheme="outline"></i></button>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item (click)="configAction()" acl
            [acl-ability]="[tabType === 1 ? 'TICKET-ETC-BLACK_LIST-addFreight' : 'TICKET-ETC-BLACK_LIST-addCart']">
            添加
          </li>
          <li nz-menu-item (click)="deleteAction()" acl
            [acl-ability]="[tabType === 1 ? 'TICKET-ETC-BLACK_LIST-deleteFreight' : 'TICKET-ETC-BLACK_LIST-deleteCart']">
            删除
          </li>
        </ul>
      </nz-dropdown-menu>
    </div>
  </ng-template>
  <st #st [data]="tabType === 1 ? service.$api_get_etc_shipper_list : service.$api_get_etc_cart_page"
    [scroll]="{ x: '1200px',y:scrollY }" [columns]="columns" [page]="{}" [req]="{ process: beforeReq }"
    [loading]="false" (change)="stChange($event)"></st>
</nz-card>